<template>
  <nav>
    <a
      :data-target="item.name"
      :class="{ active: isActive }"
      @click="$emit('click')"
      >{{ item.name }}</a
    >
  </nav>
</template>

<script>
export default {
  props: ['item', 'isActive'],
  data() {
    return {}
  },
  methods: {},
  mounted() {
    // console.log(this.item)
    this.$nextTick(() => {
      document.querySelectorAll('nav a').forEach((el) => {
        el.addEventListener('click', (e) => {
          e.preventDefault()
          document
            .getElementById(el.dataset.target)
            .scrollIntoView({ behavior: 'smooth' })
        })
      })
    })
  }
}
</script>

<style scoped>
a {
  display: block;
  color: black;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  text-align: center;
  padding: 20px;
  font-size: 18px;
  background-color: white;
}
a.active {
  background: rgb(0, 153, 168);
  color: #fff;
}
</style>
